<!-- 电子巡更页面 -->
<template>
  <div>
    <van-search
      @search="search"
      v-model="searchVal"
      placeholder="请输入搜索关键词"
    />
    <div class="line"></div>

    <van-tabs v-model="active">
      <van-tab title="巡更任务">
        <div v-if="faultList.length !== 0">
          <div v-for="item in faultList" :key="item.id" class="facility">
            <div class="message">
              <div>{{ item.processVariables.name }}</div>
              <div style="font-size: 12px; margin-top: 10px">
                {{ item.name }}&nbsp;&nbsp;&nbsp;
                {{ item.processVariables.rule }} &nbsp;&nbsp;&nbsp;test
              </div>
            </div>
            <van-button @click="look(item)"> 开始巡更 </van-button>
          </div>
        </div>
        <div class="tipMsg" v-else>暂无数据</div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { Tab, Tabs, Search, Divider, Button, ActionSheet } from 'vant'
import { task } from '@/api/index'
export default {
  components: {
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [Search.name]: Search,
    [Divider.name]: Divider,
    [Button.name]: Button,
    [ActionSheet.name]: ActionSheet
  },
  data () {
    return {
      searchVal: '',
      active: 0,
      show: false,
      actions: [{ name: '保修' }, { name: '设备台账' }],
      isLoading1: false,
      isLoading2: false,
      isLoading3: false,
      faultList: []
    }
  },

  computed: {},
  mounted () {
    this.getTask('patrol', '')
  },
  methods: {
    search (val) {
      this.getTask('patrol', val)
    },
    onSelect (item) {
      const { name } = item
      switch (name) {
        case '保修':
          this.$router.push('/standingBook-guarantee')
          break
        case '设备台账':
          this.$router.push('/standingBook-detail')
          break
      }
    },
    // 点击开始巡更按钮
    look (item) {
      console.log(item.processVariables.name)
      this.$router.push({
        path: '/electronicDetail',
        query: { id: item.id, name: item.processVariables.name }
      })
      // Toast('稍后更新')
    },
    // 获取数据列表
    async getTask (processDefinitionKey, name) {
      var conditionKeyLike = ['owner']
      var conditionValueLike = [window.localStorage.getItem('personId')]
      if (name !== '') {
        conditionKeyLike.push('taskName')
        conditionValueLike.push(name)
      }

      const data = {
        tenantId: window.localStorage.getItem('tenantId'),
        processCategory: processDefinitionKey,
        page: 1,
        pageSize: 400,
        conditionKeyLike: conditionKeyLike.join(','),
        conditionValueLike: conditionValueLike.join(','),
        withVariables: true
      }
      const res = await task(data)
      console.log(res, 'llaa')
      this.faultList = res.list
    }
  }
}
</script>
<style lang='less' scoped>
.line {
  width: 100%;
  height: 1px;
  border: 1px solid rgba(242, 242, 242, 1);
}
.facility {
  height: 60px;
  border-bottom: 1px solid rgba(242, 242, 242, 1);
  background: #fff;
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
  align-items: center;
  .message {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }
}
.tipMsg {
  width: 100%;
  height: 100%;
  line-height: 200px;
  font-size: 20px;
  color: grey;
  text-align: center;
}
</style>
